import { Component, OnInit } from '@angular/core';
import { ANIMATION_TYPES } from 'ngx-loading';
import { Router } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
  
@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loading: boolean; // 是否显示 loading 组件
  config: object = {}; //  loading组件配置
  time: any;

  login_form: FormGroup;

  private timer;

  constructor(
    private _router: Router
  ) {
    
  }

  ngOnInit() {
    this.loading = false;
    this.config = {
      animationType: ANIMATION_TYPES.rectangleBounce,
      backdropBorderRadius: '0px',
      // backdropBackgroundColour: '#9f9ec8',
      fullScreenBackdrop: true,
      // primaryColour: 'skyblue',
      secondaryColour: 'red'
    }
    this.login_form = new FormGroup({
      username: new FormControl("admin"),
      password: new FormControl("123321")
    });
  }


  on_login_click() {
    this.loading = true;
    console.log(this.login_form.value);
    this.time = setInterval(
      () => {
        this.loading = false;
        if ((this.login_form.controls['username'].value === 'admin') && (this.login_form.controls['password'].value === '111111')) {
          this._router.navigate(['home']);
        } else {
          this._router.navigate(['login']);
        }
      },
      1000
    );
  }

  ngOnDestroy(): void {
    //Called once, before the instance is destroyed.
    //Add 'implements OnDestroy' to the class.
    clearInterval(this.time);
  }

}
